<style scoped>
</style>

<template>
  <div>
    <Modal v-model="IsModalShow"
           title="商铺导入"
           :mask-closable="false"
           @on-cancel="cancel"
           width="680">
      <Row style="margin-bottom:20px;">
        <Col span="12">
        <Button @click="downloadExcelTemplate"
                type="default"
                icon="md-archive"
                size="large">下载导入模版</Button>
        </Col>
        <Col span="12">
        <Upload ref="upload"
                :accept="Accept"
                :headers="MyHeaders"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :format="['xls','xlsx']"
                :on-format-error="handleFormatError"
                :action="UploadAddress"
                class="top-btn">
          <Button type="primary"
                  size="large"
                  :loading="IsUploading"
                  icon="ios-cloud-upload-outline">导入商铺信息</Button>
        </Upload>
        </Col>
      </Row>
      <Row>
        <Alert type="warning"
               show-icon>
          提示
          <template slot="desc">
            导入消防栓、微型消防站、医疗服务站、消防支队时，名称请选择对应的所属场所
          </template>
        </Alert>
      </Row>

      <Row v-if="tableData.length>0">
        <Table stripe
               size="small"
               :columns="tableColums"
               :data="tableData"></Table>
      </Row>
      <div slot="footer">
        <Button type="default"
                @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import config from '@/config'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
import { getOperatorCombo } from '@/api/asset'
export default {
  props: {
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      Accept: '.xlsx,.xls',
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      OperatorCombo: [],
      Res_OperatorId: 0,
      tableColums: [
        {
          align: 'center',
          title: '行号',
          key: 'RowNum'
        },
        {
          align: 'center',
          title: '关键字',
          key: 'Keyword'
        },
        {
          align: 'center',
          title: '原因',
          key: 'Reason'
        }
      ],
      tableData: [],
      IsUploading: false
    }
  },
  computed: {
    MyHeaders: function() {
      let myHeaders = {}
      let tokenValue = sessionStorage.getItem('token')
      if (tokenValue) {
        myHeaders.token = tokenValue
      }
      return myHeaders
    },
    UploadAddress: function() {
      return baseUrl + '/bss/shop/import'
    }
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal
      this.tableData = []
      this.$refs['upload'].clearFiles()
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      if (!this.IsUploading) {
        this.$emit('listenModalForm')
      }
    },
    beforeUpload() {
      this.IsUploading = true
    },
    handleSuccess(res, file) {
      this.IsUploading = false
      let result = res
      if (res.code == 0) {
        this.$Message.success('上传成功！')
        // if (res.lstResult) {
        //   this.tableData = res.lstResult;
        // }
        this.$emit('refreshTableList')
      } else {
        // if (res.lstResult) {
        //   this.tableData = res.lstResult;
        // }
        this.$Message.error(res.msg)
      }

      console.log(result)
    },
    handleFormatError(file) {
      this.IsUploading = false
      this.$Notice.warning({
        title: '文件格式不对',
        desc: '上传文件格式不正确，请上传xls或xlsx格式的excel'
      })
    },
    downloadExcelTemplate() {
      const url = baseUrl + '/excel/shops.xlsx'
      window.open(url)
    }
  }
}
</script>
